<template>
	<view class="receive-center u-flex u-col-bottom">
		<view class="receive-content">
			<view class="content-header">
				配送中心
				<image src="../../static/images/icon_close@2x.png" mode="" @click="hide"></image>
			</view>
			<scroll-view scroll-y style="height: 100%;width: 100%;" >
				<!-- <item @hideAddressMadal="hideAddressMadal" v-for="(item,index) in deliveredList.list" :key="item.id" :type="current" :item="item"></item>
				<u-loadmore :status="status" @loadmore="onreachBottom" /> -->
				<u-cell-group>
					<u-cell-item :title="item.name" :arrow="true" @click="clickCell(index)" v-for="(item,index) in vuex_delivery_type" :key="item.id"></u-cell-item>
				</u-cell-group>
			</scroll-view>
			<!-- <view class="" style="position: relative;">
				<view class="line-col">
					<u-line color="#CCCCCC" direction="col" length="40rpx" :hair-line="false" />
				</view>
				<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" bar-width="94" bar-height="4" active-color="#F5B340"
				 font-size="36rpx" inactive-color="#999999" :current="current" @change="tabsChange"></u-tabs-swiper>
			</view> -->
			<!-- <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="m-swiper"> -->
				<!-- <swiper-item class="swiper-item"> -->
					<!-- <u-empty text="暂无数据" mode="data" v-if="!deliveredList.list.length"></u-empty> -->
					
				<!-- </swiper-item> -->
				<!-- <swiper-item class="swiper-item"> -->
					<!-- <u-empty text="暂无数据" mode="data" v-if="!toBeDeliveredList.list.length"></u-empty> -->
					<!-- <scroll-view scroll-y style="height: 300rpx;width: 100%;" @scrolltolower="onreachBottom" v-else> -->
						<!-- <item @hideAddressMadal="hideAddressMadal" v-for="(item,index) in toBeDeliveredList.list" :key="item.id" :type="current" -->
						 <!-- :item="item"></item> -->
						<!-- <u-loadmore :status="status" @loadmore="onreachBottom" /> -->
					<!-- </scroll-view> -->
				<!-- </swiper-item> -->
			<!-- </swiper> -->
		</view>
		<view class="select-address-madal u-flex u-flex-col u-col-center u-row-center" v-show="isAddressMadal">
			<image src="../../static/images/icon_close@2x.png" mode="" @click="hideAddressMadal" class="close-icon"></image>
			<image class="goods-img" src="../../static/images/chick5.png" mode="widthFix"></image>
			<view class="m-number-box">
				<u-number-box v-model="value" @change="valChange" :long-press="false" bg-color="#F5B340" color="#FFFFFF" :min="1"
				 :max="vuex_delivery.num"></u-number-box>
			</view>
			<view class="address" @click="selectAddress">
				<view class="" v-if="vuex_address == null">添加地址</view>
				<view class="" v-else>
					<view class="">
						{{vuex_address.address}}
					</view>
					<view class="">
						<text class="u-margin-right-36">{{vuex_address.mobile}}</text>
						<text>{{vuex_address.name}}</text>
					</view>
				</view>
			</view>
			<view class="submit-btn" @click="distributeChicken">确定</view>
		</view>
	</view>
</template>

<script>
	import Item from './item/item.vue';
	let meta = {
		current_page: 0,
		per_page: 15
	}
	export default {
		name: 'deliveryCenter',
		data() {
			return {
				list: [{
						name: '待配送'
					},
					{
						name: '已配送'
					}
				],
				isAddressMadal: false,
				status: "loadmore",
				value: 1,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				deliveredList: {
					meta: {
						current_page: 0,
					},
					list: []
				},
				toBeDeliveredList: {
					meta: {
						current_page: 0,
					},
					list: []
				},
			};
		},
		created() {
			// this.getDistributioncentre()
			
		},
		methods: {
			clickCell(index){
				console.log(index)
				if(!this.vuex_token){
					this.$u.toast('请先登录')
					return false
				}
				uni.navigateTo({
					url:"../../buychicken/delivery/delivery?type="+index
				})
			},
			selectAddress() {
				uni.navigateTo({
					url: "../../mine/address/address?type=select"
				})
			},
			valChange(e) {},
			hide() {
				this.$emit('showDeliverCenter');
			},
			hideAddressMadal() {
				this.isAddressMadal = !this.isAddressMadal;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.getDistributioncentre()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (!this.current && this.deliveredList.meta.current_page === this.deliveredList.meta.current_page) {
					this.status = 'nomore'
					return false
				}
				if (this.current === 1 && this.toBeDeliveredList.meta.current_page === this.toBeDeliveredList.meta.current_page) {
					this.status = 'nomore'
					return false
				}
				this.status = 'loading';
				this.getDistributioncentre();
			},
			getDistributioncentre() {
				let params = {
					type: this.current + 1,
					page: !this.current ? this.deliveredList.meta.current_page + 1 : this.toBeDeliveredList.meta.current_page + 1,
					page_size: meta.per_page
				}
				this.$u.api.getDistributioncentre(params).then(res => {
					if (res.errno === "000") {
						!this.current ? this.deliveredList.list = [...this.deliveredList.list, ...res.result.data] : this.toBeDeliveredList
							.list = [
								...this.toBeDeliveredList.list, ...res.result.data
							];
						!this.current ? this.deliveredList.meta = res.result.meta : this.toBeDeliveredList.meta = res.result.meta;
					}
				}).catch(err => {
					console.log(err);
				})
			},
			
			distributeChicken() {
				if (this.vuex_address == null) {
					this.$u.toast("请先配送选择地址")
					return false
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					chickenorder_id: this.vuex_delivery.chickenorder_id,
					num: this.value,
					address_id: this.vuex_address.id
				}
				this.$u.api.distributeChicken(params).then(res => {
					this.$u.toast(res.errmsg)
					uni.hideLoading()
					if (res.errno === "000") {
						this.$emit('showDeliverCenter');
					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
		destroyed() {
			meta.current_page = 0
		},
		components: {
			Item
		}
	};
</script>

<style>
	.receive-center {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 15;
	}

	.select-address-madal {
		width: 691rpx;
		height: 600rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(167, 92, 26, 1);
		border-radius: 20rpx;
		position: absolute;
		top: 174rpx;
		left: 50%;
		transform: translate(-50%, 0);
		overflow: hidden;
		padding: 34rpx 30rpx;
		box-sizing: border-box;
	}

	.goods-img {
		width: 110rpx;
		height: 138rpx;
		border-radius: 10rpx;
	}

	.address {
		width: 632rpx;
		min-height: 70rpx;
		background: rgba(229, 229, 229, 1);
		border-radius: 10px;
		font-size: 28rpx;
		color: #999999;
		padding: 0 18rpx;
		line-height: 70rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
	}

	.m-number-box {
		margin-top: 36rpx;
	}

	.receive-content {
		width: 100%;
		height: 500rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx 20rpx 0px 0px;
		overflow: hidden;
	}

	.close-icon {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}

	.submit-btn {
		width: 240rpx;
		height: 70rpx;
		background: rgba(245, 179, 64, 1);
		border: 3rpx solid rgba(204, 126, 43, 1);
		border-radius: 20rpx;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		line-height: 70rpx;
		margin-top: 30rpx;
	}

	.content-header {
		width: 100%;
		height: 82rpx;
		position: relative;
		text-align: center;
		font-size: 36rpx;
		line-height: 82rpx;
	}

	.content-header image {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}

	.receive-content-scroll {
		height: 100%;
	}

	.line-col {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.m-swiper {
		width: 100%;
		height: 300rpx;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.m-number-box>>>.u-icon-plus.data-v-18418972,
	.m-number-box>>>.u-icon-minus.data-v-18418972 {
		border: 1px solid rgba(245, 179, 64, 1) !important;
		border-radius: 10rpx !important;
	}
</style>
